<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wangEditor example</title>
    <script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script>
</head>

<body>
    <p>
        wangEditor demo
    </p>
    <div id="div1">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        <p>测试视频</p>
        <p data-we-video-p="true">
            <video src="/server/upload-files/测试1-w9b.mp4" controls="controls" style="max-width:100%"></video>
        </p>
    </div>

    <script src="../dist/wangEditor.js"></script>
    <script>
        // 改为使用var声明，才能在window对象上获取到编辑器实例，方便e2e测试
        var E = window.wangEditor
        var editor = new E('#div1')

        // 上传地址
        editor.config.uploadVideoServer = 'http://106.12.198.214:3000/api/upload-video';

        // 自定义插入视频
        // editor.config.customInsertVideo = (url) => {
        //     console.log('自定义插入视频---->', url);
        //     // 演示西瓜视频
        //     editor.cmd.do('insertHTML', `<p>
        //                                     <p contenteditable = false id="mse" style="max-width:100%"></p>
        //                                  </p>`)
        //     let player = new Player({
        //         id: 'mse',
        //         url: url
        //     });
        // }

        // // 自定义上传
        // editor.config.customUploadVideo = (files, insertVideoFn) => {
        //     console.log('自定义上传---->', files);
        //     insertVideoFn('/server/upload-files/测试1-w9b.mp4');
        // }

        // 显示“插入视频”
        editor.config.showLinkVideo = true;

        // accept
        editor.config.uploadVideoAccept = ['mp4'];

        // 上传视频的最大体积，默认 1024M
        editor.config.uploadVideoMaxSize = 1 * 1024 * 1024;

        // 自定义上传视频的名称
        editor.config.uploadVideoName = '';

        // 上传视频自定义参数
        editor.config.uploadVideoParams = {};

        // 自定义参数拼接到 url 中
        editor.config.uploadVideoParamsWithUrl = true;

        // 上传视频自定义 header
        editor.config.uploadVideoHeaders = {};

        // 钩子函数
        editor.config.uploadVideoHooks = {
            // 上传视频之前
            before: function (xhr) {
                console.log(xhr)

                // 可阻止视频上传
                // return {
                //     prevent: true,
                //     msg: '需要提示给用户的错误信息'
                // }
            },
            // 视频上传并返回了结果，视频插入已成功
            success: function (xhr) {
                console.log('success', xhr)
            },
            // 视频上传并返回了结果，但视频插入时出错了
            fail: function (xhr, editor, resData) {
                console.log('fail', resData)
            },
            // 上传视频出错，一般为 http 请求的错误
            error: function (xhr, editor, resData) {
                console.log('error', xhr, resData)
            },
            // 上传视频超时
            timeout: function (xhr) {
                console.log('timeout')
            },
            // 视频上传并返回了结果，想要自己把视频插入到编辑器中
            // 例如服务器端返回的不是 { errno: 0, data: {url: ....} } 这种格式，可使用 customInsert
            customInsert: function (insertVideoFn, result) {
                // result 即服务端返回的接口
                console.log('customInsert', result)

                // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
                insertVideoFn(result.data.url)
            }
        };

        // 上传视频超时时间 ms 默认5分钟
        editor.config.uploadVideoTimeout = 1000 * 60 * 5;

        // 跨域带 cookie
        editor.config.withVideoCredentials = false;

        // 自定义alert
        editor.config.customAlert = function(s){
            console.log('customAlert: ' + s)
        }

        editor.create()
    </script>
</body>

</html>